<template>
  <lay-container>
    <lay-row space="10">
      <lay-col :md="leftMd">
          <SceneVirtualTree
              v-if="leftState"
              :scrollHeight="715"
              @updateNode="updateNode"
          ></SceneVirtualTree>
      </lay-col>
      <lay-col :md="24-leftMd">
        <lay-card class="leftTreeGroup">
          <router-view
            v-if="appStore.routerAlive"
            :key="route.fullPath"
          ></router-view>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts">
import SourcesTree from "../../../components/database/SourcesTree.vue";
import TableBasicInfo from "../../../components/database/TableBasicInfo.vue";
import ScenesTree from "../../../components/scene/tree/ScenesTree.vue";

export default {
    name: 'CreateScene',
    components: {
      SourcesTree,
      TableBasicInfo,
      ScenesTree
    }
}
</script>

<script lang="ts" setup>
import {nextTick, reactive, ref} from "vue";
import { useAppStore } from "../../../store/app";
import {useRoute} from "vue-router";
import SceneVirtualTree from "../../../components/scene/tree/SceneVirtualTree.vue";

const appStore = useAppStore();
const route = useRoute();
const leftMd = ref(6);

const target=ref()
nextTick(()=>{
  target.value=document.querySelector("#scene_tree");
});

let node = reactive({
    title: '',
	  id: '0',
    type: 'scene_root'
});


const updateNode = (value: any) => {
    node = value;
};

const leftState = ref(true);

</script>

<style>
.leftTreeScene {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.leftTreeGroup {
  overflow: auto;
  width: 100%;
  height: 800px;
}
</style>